<template>
	<view class="all">
		<view class="top">
			<view class="top_log">
				<image src="../../static/image/foodsdetails/xuhuan.png" />
				<image src="../../static/image/foodsdetails/zhuanfa.png" />
			</view>
		</view>
		<view class="main">
			<!-- //图片 -->
			<image class="main_img" src="../../static/image/foodsdetails/tupian1.png"></image>
			<!-- 会员 -->
			<view class="vip">
				<view class="vip_text">
					<text>会员低至2元/月，免广告、看10000+名厨视频</text>
				</view>
				<view class="food_name"><text>蜜豆鲷鱼烧</text></view>
				<view class="food_see">
					<view class="fs1">
						<text>4.6万浏览</text>
						<image src="../../static/image/foodsdetails/liulam%20(1).png" ></image>
					</view>
					<view class="fs1">
						<text>117收藏</text>
						<image src="../../static/image/foodsdetails/soucang(1).png" ></image>
					</view>
				</view>
			</view>
			<!-- 心得 -->
			<view class="heart">
				<view class="heart_text">
					<text>心得</text>
					<view class="ht_dat">
						<text>还是说是个好几十个  是个好几十个就收购价是个就是十几个聚划算是</text>
					</view>
				</view>
				
			</view>
			<!-- 详情 -->
			<view class="details_food">
				<!-- 标题 -->
				<view class="df_title">
					<view class="dft_time">
						<image src="../../static/image/foodsdetails/shijian.png"></image>
						<text>30分钟</text>
					</view>
					<view class="dft_time">
						<image src="../../static/image/foodsdetails/xing%20.png"></image>
						<text>30分钟</text>
					</view>
					
				</view>
				<!-- 用料 -->
				<view class="df_use">
					<view class="dfu_title">
						<text>用料</text>
						<text style="color: #f5b488;">加入采购清单</text>
					</view>
					<!-- 详情 -->
					<view class="dfu_class">
						<text>鸡蛋</text>
						<text style="padding-left: 400rpx;">2个</text>
					</view>
				</view>
				<!-- 步骤 -->
				<view class="df_step">
					<view class="dfs_all">
						<text>步骤1</text>
						<view class="dfsa_img">
							<image src="../../static/image/foodsdetails/tupain1.png" ></image>
						</view>
						<text>xxxxxxxx</text>
					</view>
				</view>
				<!-- 小贴士 -->
				<view class="small_say">
					<view class="ss_all">
						<text style="font-weight: 700;color: black;">小贴士</text>
						<view class="ss_text">
							<text>
								还是说尽快核实块级是海神九考数控技术
								横说竖说监考老师吉林省时
							</text>
						</view>
					</view>
					
				</view>
			
			</view>
			
		</view>
		<view class="footer">
			<!-- 相关菜谱 -->
			<text>相关菜谱</text>
			<view class="about">
				<view class="about_food">
					<image src="../../static/image/foodsdetails/msg%20(3).png"></image>
					<text style="font-weight: 500;padding: 20rpx 0;">日式火锅</text>
					<view class="af_icon">
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/liulam%20(1).png"></image>
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/soucang(1).png"></image>
					</view>
				</view>
				<view class="about_food">
					<image src="../../static/image/foodsdetails/msg%20(3).png"></image>
					<text style="font-weight: 500;padding: 20rpx 0;">日式火锅</text>
					<view class="af_icon">
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/liulam%20(1).png"></image>
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/soucang(1).png"></image>
					</view>
				</view>
				<view class="about_food">
					<image src="../../static/image/foodsdetails/msg%20(3).png"></image>
					<text style="font-weight: 500;padding: 20rpx 0;">日式火锅</text>
					<view class="af_icon">
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/liulam%20(1).png"></image>
						<text>11.3万</text>
						<image src="../../static/image/foodsdetails/soucang(1).png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad(option){
			uni.setNavigationBarTitle({
				title:option.name
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		background-color:#f6f7f8 ;
		width: 750rpx;

		.top {
			background-color: #ee7b2d;
			height: 60rpx;
			box-sizing: border-box;
			padding-left: 600rpx;
			.top_log{
				width: 150rpx;
				line-height: 60rpx;
				image{
					width: 50rpx;
					height: 50rpx;
					vertical-align: middle;
				}
			}
		}
	
	.main{
		width: 100%;
		.main_img{
			width: 750rpx;
			height: 390rpx;
		}
		.vip{
			padding:10rpx 20rpx ;
			background-color: #ffffff;
			.vip_text{
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				color: #ffffff;
				background-color: #e7b665;
				border-radius: 10rpx;
				font-weight: bold;
			}
			.food_name{
				text-align: center;
				margin-top: 50rpx;
				font-weight: 600;
			}
			.food_see{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				.fs1{
					display: flex;
					align-items: center;
					padding: 30rpx 20rpx;
					font-size: 25rpx;
					color: #cccccc;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		
		.heart{
			background-color: #ffffff;
			margin-top: 20rpx;
			padding: 0 30rpx;
			.heart_text{
				padding: 30rpx 0;
				.ht_dat{
					margin-top: 20rpx;
				}
			}
		}
		.details_food{
			margin-top: 30rpx;
			padding: 40rpx 30rpx;
			background-color: #ffffff;
			.df_title{
				display: flex;
				justify-content: center;
				align-items: center;
				.dft_time{
					display: flex;
					align-items: center;
					font-size: 25rpx;
					color: #999999;
					image{
						margin-right: 10rpx;
						margin-left: 20rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.df_use{
				margin: 20rpx 0;
				.dfu_title{
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #cccccc;
					padding: 20rpx 0;
				}
				.dfu_class{
					border-bottom: 2rpx solid #cccccc;
					padding: 20rpx 0;
					color: #999999;
				}
				
			}
			.df_step{
				padding-top: 30rpx;
				border-bottom: 2rpx solid #cccccc;
				.dfs_all{
					margin-bottom: 30rpx;
					.dfsa_img{
						margin: 30rpx 0;
						image{
							width: 100%;
						}
					}
				}
			}
		
			.small_say{
				background-color: #f5f5f5;
				margin-top: 20rpx;
				padding: 20rpx 5rpx;
				border-radius: 10rpx;
				.ss_all{
					padding: 20rpx 40rpx;
					color: #999999;
					font-size: 25rpx;
					.ss_text{
						margin-top: 10rpx;
					}
				}
			}
		
		}
		
	}
	
	}
	
	.footer{
		background-color: #ffffff;
		padding: 40rpx 30rpx;
		
		.about{
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			color: #999999;
			.about_food{
				margin-bottom: 40rpx;
				width: 330rpx;
					image{
						width: 330rpx;
						height: 250rpx;
					}
				.af_icon{
					display: flex;
					align-items: center;
					font-size: 25rpx;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						margin-right: 30rpx;
					}
				}
			}
		}
	}
</style>
